<template>
    <div class="main-layout">
        <div class="breadcrumb_">
            <Breadcrumb :items="breadcrumbItems" />
        </div>
        <div class="content-layout">
            <aside class="sidebar">
                <h2>{{ title }}</h2>
                <slot name="sidebar"></slot>
            </aside>

            <main class="content">
                <!-- <div class="content-header">

                </div> -->
                <slot name="content"></slot>
            </main>
        </div>
    </div>
</template>
<script setup>
defineProps({
    title: {
        type: String,
        required: true
    },
    breadcrumbItems: {
        type: Array,
        default: () => []
    }
})
</script>
<style scoped lang="scss">
@use '@/assets/scss/main' as *;

.main-layout {
    .breadcrumb_ {
        max-width: 1200px;
        margin: 0rem auto;
    }

    .content-layout {
        display: grid;
        grid-template-columns: 15rem 1fr;
        gap: 30px;
        max-width: 1200px;
        margin: 0rem auto;
        padding-bottom: 2rem;

        .sidebar {
            background: #ffffff;
            border-radius: .25rem;

            h2 {
                background: $myprimary-color;
                text-align: center;
                color: #fff;
                padding: .75rem 0;
                border-radius: .25rem .25rem 0 0;
            }
        }

        .content {
            background-color: #fff;
            border-radius: .25rem;
            padding: 1rem 2rem;

            &-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 1.2rem;
                //   padding-bottom: 15px;
                border-bottom: 2px solid #1867CA;
                //   position: relative;
            }
        }
    }

}

@media (max-width: 768px) {
    .main-layout {
        padding: 0 .8rem;

        .breadcrumb_ {
            max-width: 100%;
        }

        .content-layout {
            grid-template-columns: 1fr;
            max-width: 100%;
            padding: 0;
            gap: 1rem;
            .sidebar {
                h2 {
                    font-size: 1.1rem;
                }

            }
            .content{
                padding:.8rem;
                margin-bottom:.8rem;
            }
        }
    }
}
</style>